<script setup lang='ts'>
import { Document, Postcard } from '@element-plus/icons-vue'
import ShenHe from '@/views/process/components/ShenHe.vue'

const shenheVisible = ref(false)

const data = [
  {
    person: '张三',
    files1: [
      'xxxx合同.pdf',
      'xxxx合同.pdf',
    ],
    files2: [
      'xxxx合同-已签署.pdf',
      'xxxx合同-已签署.pdf',
    ],
    status: '待审核',
    request: 'xxxxx',
    reason: 'xxxxx',
  },
  {
    person: '李四',
    files1: [
      'xxxx合同.pdf',
      'xxxx合同.pdf',
    ],
    files2: [
      'xxxx合同-已签署.pdf',
      'xxxx合同-已签署.pdf',
    ],
    status: '已驳回',
    request: 'xxxxx',
    reason: 'xxxxx',
  },
  {
    person: '李四',
    files1: [
      'xxxx合同.pdf',
      'xxxx合同.pdf',
    ],
    files2: [
      'xxxx合同-已签署.pdf',
      'xxxx合同-已签署.pdf',
    ],
    status: '已通过',
    request: 'xxxxx',
    reason: 'xxxxx',
  },
]
</script>

<template>
  <a-collapse :default-active-key="['1']" destroy-on-hide mb-3 w-full>
    <a-collapse-item key="1" header="业务合同审批">
      <div class="form-block !w-1/2" data-title="财务风险处理" mb3 flex gap-3>
        <el-select placeholder="">
          <el-option label="合同暂未上传，已知晓如何处理" value="1" />
          <el-option label="合同进行中，修改合同/补充协议" value="2" />
          <el-option label="合同已完成，修改合同/补充协议" value="3" />
        </el-select>
        <el-button type="primary">
          提交
        </el-button>
      </div>
      <BaseTable :data="data" stripe w-full border>
        <el-table-column prop="person" label="申请人" />
        <el-table-column label="合同附件">
          <el-table-column prop="files1" label="未签署">
            <template #default="{ row }">
              <p v-for="item in row.files1" :key="item">
                {{ item }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="file2" label="已签署">
            <template #default="{ row }">
              <p v-for="item in row.files2" :key="item">
                {{ item }}
              </p>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.status === '待审核'" type="info">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已通过'" type="success">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已驳回'" type="danger">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>s
        <el-table-column prop="request" label="申请原因" />
        <el-table-column prop="reason" label="审批意见" />
        <el-table-column prop="reason" label="合同服务要求" />
        <el-table-column label="操作" width="280">
          <template #default="{ row }">
            <el-button v-if="row.status === '已驳回'" type="primary">
              重新发起
            </el-button>
            <el-button v-if="row.status === '待审核'" type="primary" @click="shenheVisible = true">
              审核
            </el-button>
            <el-button v-if="row.status === '已通过'" type="primary">
              上传附件
            </el-button>
          </template>
        </el-table-column>
      </BaseTable>
      <div mt-3 />
      <pre rounded-md bg-gray-50 p2 text-sm text-gray>
流程建议：(精准报价发生变化需合同专员确认信息并选择处理建议，才可继续执行合同流程)
  1.合同暂未上传，已知晓如何处理；
  2.合同进行中，修改合同/补充协议；
  3.合同已完成，修改合同/补充协议。
</pre>
    </a-collapse-item>
    <a-collapse-item key="2" header="采购合同审批">
      <BaseTable :data="data" stripe w-full border>
        <el-table-column prop="person" label="申请人" />
        <el-table-column label="合同附件">
          <el-table-column prop="files1" label="未签署">
            <template #default="{ row }">
              <p v-for="item in row.files1" :key="item">
                {{ item }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="file2" label="已签署">
            <template #default="{ row }">
              <p v-for="item in row.files2" :key="item">
                {{ item }}
              </p>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="{ row }">
            <el-tag v-if="row.status === '待审核'" type="info">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已通过'" type="success">
              {{ row.status }}
            </el-tag>
            <el-tag v-else-if="row.status === '已驳回'" type="danger">
              {{ row.status }}
            </el-tag>
          </template>
        </el-table-column>s
        <el-table-column prop="request" label="申请原因" />
        <el-table-column prop="reason" label="审批意见" />
        <el-table-column label="操作" width="280">
          <template #default="{ row }">
            <el-button v-if="row.status === '已驳回'" type="primary">
              重新发起
            </el-button>
            <el-button v-if="row.status === '待审核'" type="primary" @click="shenheVisible = true">
              审核
            </el-button>
            <el-button v-if="row.status === '已通过'" type="primary">
              上传附件
            </el-button>
          </template>
        </el-table-column>
      </BaseTable>
    </a-collapse-item>
  </a-collapse>
  <ShenHe v-model="shenheVisible" />
</template>

<style scoped lang='scss'>
</style>
